
// window.addEventListener('load',function(){
//     var box=document.querySelector('.img');
//     var move=document.querySelector('.move');
//     var big=document.querySelector('.big');
//     //鼠标的进出去决定盒子的出现
//     box.addEventListener('mouseover',function(){
//         move.style.display='block';
//         big.style.display='block';
//         box.addEventListener('mouseout',function(){
//             move.style.display='none';
//             big.style.display='none';
//         })
//     })
//     //鼠标跟随
//      box.addEventListener('mousemove',function(e){
//         var x=e.pageX-this.offsetLeft;
//         var y=e.pageY-this.offsetTop;
//         moveX=x-move.offsetWidth/2;
//         moveY=y-move.offsetHeight/2;
//         console.log(box.offsetWidth-move.offsetWidth);
//         //让move只能在盒子范围内移动
//         if(moveX<=0){
//             moveX=0;
//         }else if(moveX>=box.offsetWidth-move.offsetWidth){
//             moveX=box.offsetWidth-move.offsetWidth;
//         }
//         if(moveY<=0){
//             moveY=0;
//         }else if(moveY>=box.offsetHeight-move.offsetHeight){
//             moveY=box.offsetHeight-move.offsetHeight;
//         }
//         move.style.left=moveX+'px';
//         move.style.top=moveY+'px';
//         movemax=box.offsetWidth-move.offsetWidth;
//         //大图的移动,按比例移动
//         var b=document.querySelector('.b');
//         var bMax=b.offsetWidth-big.offsetWidth;
//         console.log(bMax);
//         var bX=moveX*bMax/movemax;
//         var bY=moveY*bMax/movemax;
//         b.style.marginLeft=(-bX+'px');
//         b.style.marginTop=(-bY+'px');
//      })    

        

// })

window.addEventListener('load', function() {
    var box = document.querySelector('.img');
    var move = document.querySelector('.move');
    var big = document.querySelector('.big');
    var isTouchDevice = ('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0); // 检测是否是触摸设备

    // 鼠标的进出去决定盒子的出现
    function showMagnifier() {
        move.style.display = 'block';
        big.style.display = 'block';
    }
    
    function hideMagnifier() {
        move.style.display = 'none';
        big.style.display = 'none';
    }
    
    if (!isTouchDevice) {
        box.addEventListener('mouseover', showMagnifier);
        box.addEventListener('mouseout', hideMagnifier);
    } else {
        box.addEventListener('touchstart', showMagnifier);
        box.addEventListener('touchend', hideMagnifier);
    }

    // 鼠标/触摸跟随
    function moveMagnifier(event) {
        var x, y;
        if (!isTouchDevice) {
            x = event.pageX - this.offsetLeft;
            y = event.pageY - this.offsetTop;
        } else {
            x = event.touches[0].pageX - this.offsetLeft;
            y = event.touches[0].pageY - this.offsetTop;
        }
        
        var moveX = x - move.offsetWidth / 2;
        var moveY = y - move.offsetHeight / 2;
        
        // 让move只能在盒子范围内移动
        if (moveX <= 0) {
            moveX = 0;
        } else if (moveX >= box.offsetWidth - move.offsetWidth) {
            moveX = box.offsetWidth - move.offsetWidth;
        }
        if (moveY <= 0) {
            moveY = 0;
        } else if (moveY >= box.offsetHeight - move.offsetHeight) {
            moveY = box.offsetHeight - move.offsetHeight;
        }
        
        move.style.left = moveX + 'px';
        move.style.top = moveY + 'px';
        
        var movemax = box.offsetWidth - move.offsetWidth;
        
        // 大图的移动，按比例移动
        var b = document.querySelector('.b');
        var bMax = b.offsetWidth - big.offsetWidth;
        
        var bX = moveX * bMax / movemax;
        var bY = moveY * bMax / movemax;
        
        b.style.marginLeft = (-bX + 'px');
        b.style.marginTop = (-bY + 'px');
    }
    
    if (!isTouchDevice) {
        box.addEventListener('mousemove', moveMagnifier);
    } else {
        box.addEventListener('touchmove', moveMagnifier);
    }
});